<template>
  <div class="ajax-demo">
    <div v-if="!repoUrl">正在努力加载中。。。</div>
    <div v-else>最受欢迎的项目是<a :href="repoUrl">{{repoName}}</a></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ajax-demo',
  data () {
    return {
      url: 'https://api.github.com/search/repositories?q=v&sort=stars',
      repoUrl: '',
      repoName: ''
    }
  },
  mounted () {
    // 发ajax请求
    // 返回Promise返回一个response
    axios.get(this.url)
      .then(res => {
        console.log(res)
        this.repoName = res.data.items[0].name
        this.repoUrl = res.data.items[0].html_url
      })
      .catch(err => {
        console.error(err)
      })
  }
}
</script>

<style scoped>
.ajax-demo {
  margin-top: 20px;
  text-align: center;
  font-size: 20px;
}
</style>
